<template>
  <a-drawer width="50%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>{{ formTitle }}</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
      <a-form-model-item label="活动名称" prop="activityName" >
        <a-input v-model="form.activityName" placeholder="请输入活动名称" />
      </a-form-model-item>
      <!--      <a-form-model-item label="活动分类" prop="activityType" >-->
      <!--        <a-select placeholder="请选择活动分类" v-model="form.activityType">-->
      <!--          <a-select-option value="" >请选择字典生成</a-select-option>-->
      <!--        </a-select>-->
      <!--      </a-form-model-item>-->
      <a-form-model-item label="联系方式" prop="activityPhone" >
        <a-input v-model="form.activityPhone" placeholder="请输入联系方式" />
      </a-form-model-item>
      <!--      <a-form-model-item label="活动开始时间" prop="activityCreateTime" >-->
      <!--        &lt;!&ndash;        <a-date-picker style="width: 100%" @change="onStartChange" mode="time" allow-clear/>&ndash;&gt;-->
      <!--        <a-date-picker-->
      <!--          v-model="startValue"-->
      <!--          :disabled-date="disabledStartDate"-->
      <!--          show-time-->
      <!--          format="YYYY-MM-DD HH:mm"-->
      <!--          placeholder="Start"-->
      <!--          @openChange="handleStartOpenChange"-->
      <!--        />-->
      <!--      </a-form-model-item>-->
      <!--      <a-form-model-item label="活动结束时间" prop="activityCreateTime" >-->
      <!--        &lt;!&ndash;        <a-date-picker style="width: 100%" @change="onEndChange" mode="time" allow-clear/>&ndash;&gt;-->
      <!--        <a-date-picker-->
      <!--          v-model="endValue"-->
      <!--          :disabled-date="disabledEndDate"-->
      <!--          show-time-->
      <!--          format="YYYY-MM-DD HH:mm"-->
      <!--          placeholder="End"-->
      <!--          :open="endOpen"-->
      <!--          @openChange="handleEndOpenChange"-->
      <!--        />-->
      <!--      </a-form-model-item>-->
      <a-form-model-item label="活动时间段" prop="activityCreateTime">
        <a-range-picker
          v-model="defaultTime"
          :show-time="timeOptions"
          format="YYYY-MM-DD HH:mm"
          allowClear=""
          @change="onChangeDateTime"
        />
      </a-form-model-item>
      <a-form-model-item label="活动人数" prop="activityNumber" >
        <a-input-number v-model="form.activityNumber" placeholder="请输入活动人数" />
      </a-form-model-item>
      <a-form-model-item label="活动内容介绍" prop="activityContent" >
        <div id="activityContent" name="activityContent" ></div>
      </a-form-model-item>
      <!--      <a-form-model-item label="活动已报名人数" prop="activityEnterNumber" >-->
      <!--        <a-input v-model="form.activityEnterNumber" placeholder="请输入活动已报名人数" />-->
      <!--      </a-form-model-item>-->
      <!--      <a-form-model-item label="活动更新时间" prop="activityUpdateTime" >-->
      <!--        <a-date-picker style="width: 100%" v-model="form.activityUpdateTime" format="YYYY-MM-DD HH:mm:ss" allow-clear/>-->
      <!--      </a-form-model-item>-->
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { getActivity, addActivity, updateActivity, getActivityByName } from '@/api/angel/activity'
import Vditor from 'vditor'
import 'vditor/dist/index.css'

export default {
  name: 'CreateForm',
  props: {
  },
  components: {
  },
  data () {
    const validateActivityPhone = (rule, value, callback) => {
      if (!(/^1([3456789])\d{9}$/.test(value))) {
        callback(new Error('联系方式有误,请输入正确的手机号'))
      } else {
        callback()
      }
    }
    const validateActivityName = (rule, value, callback) => {
      if (this.formType === 1) {
        getActivityByName(value).then(response => {
          const res = response.data
          if (res === undefined) {
            callback()
          } else {
            callback(new Error('该用户名已存在'))
          }
        })
      } else {
        callback()
      }
    }
    return {
      defaultTime: null,
      // endOpen: false,
      loading: false,
      formTitle: '',
      activityContentEditor: '',
      // startValue: null,
      // endValue: null,
      timeOptions: {
        format: 'HH:mm',
        'minute-step': 15
      },
      // 表单参数
      form: {
        activityId: null,
        activityType: null,
        activityPhone: null,
        activityCreateTime: null,
        activityStatus: 0,
        activityContent: null,
        activityNumber: null,
        activityEnterNumber: null,
        activityUpdateTime: null,
        activityName: null
      },
      // 1增加,2修改
      formType: 1,
      open: false,
      rules: {
        activityName: [
          { required: true, message: '活动名称不能为空', trigger: 'blur' },
          { min: 2, max: 30, message: '长度在 2 到 30 个字符', trigger: 'blur' },
          { validator: validateActivityName, trigger: 'blur' }
        ],
        activityPhone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { validator: validateActivityPhone, trigger: 'blur' }
        ],
        activityCreateTime: [
          { required: true, message: '时间段不能为空', trigger: 'blur' }
        ],
        activityNumber: [
          { required: true, message: '人数不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  filters: {
  },
  created () {
  },
  computed: {
  },
  watch: {
    // startValue (val) {
    //   this.form.activityCreateTime = parseTime(val._d)
    // },
    // endValue (val) {
    //   this.form.activityUpdateTime = parseTime(val._d)
    // }
  },
  mounted () {
  },
  methods: {
    onChangeDateTime (dates, dateStrings) {
      this.form.activityCreateTime = dateStrings[0]
      this.form.activityUpdateTime = dateStrings[1]
    },
    // disabledStartDate (startValue) {
    //   const endValue = this.endValue
    //   if (!startValue || !endValue) {
    //     return false
    //   }
    //   return startValue.valueOf() > endValue.valueOf()
    // },
    // disabledEndDate (endValue) {
    //   const startValue = this.startValue
    //   if (!endValue || !startValue) {
    //     return false
    //   }
    //   return startValue.valueOf() >= endValue.valueOf()
    // },
    // handleStartOpenChange (open) {
    //   if (!open) {
    //     this.endOpen = true
    //   }
    // },
    // handleEndOpenChange (open) {
    //   this.endOpen = open
    // },
    openEditor () {
      this.$nextTick(() => {
        this.activityContentEditor = new Vditor('activityContent', {
          height: 360,
          toolbarConfig: {
            pin: true
          },
          cache: {
            enable: false
          },
          after: () => {
            let content = this.form.activityContent
            if (content === undefined || content === null) {
              content = ''
            }
            this.activityContentEditor.setValue(content)
          }
        })
      })
    },
    closeEditor () {
      this.activityContentEditor.destroy()
    },
    onClose () {
      this.open = false
      this.closeEditor()
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
      this.closeEditor()
    },
    // 表单重置
    reset () {
      this.defaultTime = null
      this.formType = 1
      this.form = {
        activityId: null,
        activityType: null,
        activityPhone: null,
        activityCreateTime: null,
        activityStatus: 0,
        activityContent: null,
        activityNumber: null,
        activityEnterNumber: null,
        activityUpdateTime: null,
        activityName: null
      }
      // this.startValue = null
      // this.endValue = null
      // this.endOpen = false
    },
    /** 新增按钮操作 */
    handleAdd (row) {
      this.reset()
      this.formType = 1
      this.open = true
      this.openEditor()
      this.formTitle = '添加'
    },
    // onStartChange (date, dateString) {
    //   this.form.activityCreateTime = dateString
    // },
    // onEndChange (date, dateString) {
    //   this.form.activityUpdateTime = dateString
    // },
    /** 修改按钮操作 */
    handleUpdate (row, ids) {
      this.reset()
      this.formType = 2
      const activityId = row ? row.activityId : ids
      getActivity(activityId).then(response => {
        this.form = response.data
        this.open = true
        // this.startValue = response.data.activityCreateTime
        // this.endValue = response.data.activityUpdateTime
        this.formTitle = '修改'
        this.openEditor()
      })
    },
    /** 提交按钮 */
    submitForm: function () {
      this.form.activityContent = this.activityContentEditor.getValue()
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.form.activityId !== undefined && this.form.activityId !== null) {
            updateActivity(this.form).then(response => {
              this.$message.success(
                '修改成功',
                3
              )
              this.open = false
              this.closeEditor()
              this.$emit('ok')
            })
          } else {
            addActivity(this.form).then(response => {
              this.$message.success(
                '新增成功',
                3
              )
              this.open = false
              this.closeEditor()
              this.$emit('ok')
            })
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
